<template>
	<view class="page">
		<!-- 头部标签 -->
		<view class="header-container">
			<view class="hear-box" :style="{ height: height + 'px', paddingTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333333" @tap="goBack"></tui-icon>
				<view class="">搜索</view>
				<view style="color: #fff">0</view>
			</view>
			<!-- 搜索条 -->
			<view class="search-container">
				<view class="search-box">
					<image src="/static/images/company/search.svg"></image>
					<input type="text" v-model="KeyWord" :placeholder="placeholder" placeholder-class="input-placeholder" />
				</view>
				<view class="search-btn" @tap="searchInfo(KeyWord)">搜索</view>
			</view>
		</view>

		<!-- 内容搜索 -->
		<view v-if="currentTab == 0" :style="{ marginTop: 70 + height + 'px' }">
			<view class="searchLog-container" v-if="DataInfo.searchList && DataInfo.searchList.length">
				<view class="searchLog-header">
					<view class="searchLog-title">历史记录</view>
					<image src="/static/images/common/delete.png" @tap="deleteSearchLog" mode="widthFix"></image>
				</view>
				<view class="searchLog-box">
					<view class="info" v-for="item in DataInfo.searchList" @tap="searchInfo(item.SousuoNR)">
						{{ item.SousuoNR }}
					</view>
				</view>
			</view>
			<!-- 热门榜单 -->
			<view class="bangdan-container">
				<view class="bangdan-title">
					<image src="/static/images/common/huo.png" style="width: 40rpx" mode="widthFix"></image>
					<image src="/static/images/common/remenHuati.png" style="width: 148rpx" mode="widthFix"></image>
				</view>
				<view class="huati-box">
					<view class="huati-line" v-for="(item, index) in DataInfo.HuatiList" @tap="searchInfo(item.HuatiM)">
						<view class="left-box">
							<view class="xuhao-info" :style="{ color: computeColor(index) }">{{ index + 1 }}</view>
							<view>{{ item.HuatiM }}</view>
						</view>
						<view class="num-info">{{ computeNum(item.FangwenL) }}</view>
					</view>
				</view>
			</view>
			<view class="all-Bang" @tap="toAllBang">
				<view>查看完整热点榜</view>
				<image src="/static/images/huodong/right.png"></image>
			</view>
		</view>
		<!-- 人脉搜索 -->
		<view v-if="currentTab == 1" :style="{ marginTop: 70 + height + 'px' }">
			<view class="renmai-container" v-if="RenMaiData.CompanyList && RenMaiData.CompanyList.length">
				<view class="renmai-header">
					<view class="renmai-title">来自同公司</view>
					<view @tap="searchInfo('')">更多</view>
				</view>
				<scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; margin: 20rpx 0">
					<view class="user-container">
						<view class="RenMai-box" v-for="(item, index) in RenMaiData.CompanyList" :key="index" @tap="toUserDetail(item.Id)">
							<image :src="item.BeijingT || BeijingT" class="Renmai-BGC" mode="aspectFill"></image>
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill" class="Renmai-avatar"></image>
							<view class="RenMai-name">{{ item.NAME || '暂无姓名' }}</view>
							<view v-if="item.Zhiwei && item.Gongsi" class="Renmai-Zhiwei">{{ item.Gongsi }}-{{ item.Zhiwei }}</view>
							<view class="add-Friend" v-if="!item.frined">加为好友</view>
							<view class="pinglun-nr" v-else-if="item.pinglunNR">{{ item.pinglunNR }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="renmai-container" v-if="RenMaiData.schoolList && RenMaiData.schoolList.length">
				<view class="renmai-header">
					<view class="renmai-title">来自同校</view>
					<view @tap="searchInfo('')">更多</view>
				</view>
				<scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; margin: 20rpx 0">
					<view class="user-container">
						<view class="RenMai-box" v-for="(item, index) in RenMaiData.schoolList" :key="index" @tap="toUserDetail(item.Id)">
							<image :src="item.BeijingT || BeijingT" class="Renmai-BGC" mode="aspectFill"></image>
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill" class="Renmai-avatar"></image>
							<view class="RenMai-name">{{ item.NAME || '暂无姓名' }}</view>
							<view v-if="item.Zhiwei && item.Gongsi" class="Renmai-Zhiwei">{{ item.Gongsi }}-{{ item.Zhiwei }}</view>
							<view class="add-Friend" v-if="!item.frined">加为好友</view>
							<view class="pinglun-nr" v-else-if="item.pinglunNR">{{ item.pinglunNR }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="renmai-container" v-if="RenMaiData.ZhiweiList && RenMaiData.ZhiweiList.length">
				<view class="renmai-header">
					<view class="renmai-title">来自行业</view>
					<view @tap="searchInfo('')">更多</view>
				</view>
				<scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; margin: 20rpx 0">
					<view class="user-container">
						<view class="RenMai-box" v-for="(item, index) in RenMaiData.ZhiweiList" :key="index" @tap="toUserDetail(item.Id)">
							<image :src="item.BeijingT || BeijingT" class="Renmai-BGC" mode="aspectFill"></image>
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill" class="Renmai-avatar"></image>
							<view class="RenMai-name">{{ item.NAME || '暂无姓名' }}</view>
							<view v-if="item.Zhiwei && item.Gongsi" class="Renmai-Zhiwei">{{ item.Gongsi }}-{{ item.Zhiwei }}</view>
							<view class="add-Friend" v-if="!item.frined">加为好友</view>
							<view class="pinglun-nr" v-else-if="item.pinglunNR">{{ item.pinglunNR }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="renmai-container" v-if="RenMaiData.TuiJianList && RenMaiData.TuiJianList.length">
				<view class="renmai-header">
					<view class="renmai-title">来自推荐</view>
					<view @tap="searchInfo('')">更多</view>
				</view>
				<scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; margin: 20rpx 0">
					<view class="user-container">
						<view class="RenMai-box" v-for="(item, index) in RenMaiData.TuiJianList" :key="index" @tap="toUserDetail(item.Id)">
							<image :src="item.BeijingT || BeijingT" class="Renmai-BGC" mode="aspectFill"></image>
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill" class="Renmai-avatar"></image>
							<view class="RenMai-name">{{ item.NAME || '暂无姓名' }}</view>
							<view v-if="item.Zhiwei && item.Gongsi" class="Renmai-Zhiwei">{{ item.Gongsi }}-{{ item.Zhiwei }}</view>
							<view class="add-Friend" v-if="!item.frined">加为好友</view>
							<view class="pinglun-nr" v-else-if="item.pinglunNR">{{ item.pinglunNR }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			startTime: 0,
			Islogin: this.Microi.IsLogin(),
			CurrentUser: this.Microi.GetCurrentUser(),
			DataInfo: {},
			BeijingT: '',
			RenMaiData: {},
			leftPopup: false,
			winInfo: {},
			height: 64, //header高度
			top: 26, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			currentTab: 0,
			width: 375,
			page: 0,
			tabs: [
				{
					name: '搜索内容'
					// placeholder: '搜人名/公司/职位/行业'
				},
				{
					name: '搜索人脉'
					// placeholder: '搜公司/行业/职位等'
				}
			],
			KeyWord: '',
			placeholder: '搜人名/公司/职位/行业'
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.tabwidth = this.width * 0.65;
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;

					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.winInfo = res;
					// if (res.hostName == 'WeChat') {
					// 	this.top = this.top + 30;
					// }
					this.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},
	onShow() {
		this.startTime = new Date();
		this.change({ index: this.currentTab });
	},
	onLoad(options) {
		if (options.currentTab) this.currentTab = options.currentTab;

		this.get_morenBGC();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		async getSearchInfo() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_SearchInfo', {
				YonghuID: self.CurrentUser?.Id
			});
			this.DataInfo = res.Data;
		},
		deleteSearchLog() {
			this.Microi.ApiEngine.Run('delete_SearchLog', {
				YonghuID: this.CurrentUser.Id
			});
			this.DataInfo.searchList = [];
		},
		async searchInfo(name = '') {
			if (!name && this.currentTab == 0) {
				this.Microi.Tips('请输入搜索内容');
				return;
			}
			if (this.Islogin && this.currentTab == 0) {
				var res = await this.Microi.ApiEngine.Run('add_SearchLog', {
					name: name,
					YonghuID: this.CurrentUser?.Id
				});
			}

			uni.navigateTo({
				url: '/pages/my/search/searchList?info=' + name + '&currentTab=' + this.currentTab
			});
		},
		toUserDetail(Id) {
			uni.navigateTo({
				url: '/pages/my/myDetail/myDetail?Id=' + Id
			});
		},
		async getRenMaiTuijian() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_RenmaiXinxiSearch', {
				YonghuID: self.CurrentUser?.Id
			});
			this.RenMaiData = res.Data;
		},
		async get_morenBGC() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('customize_crud', {
				EngineKey: 'KEY000007'
			});
			this.BeijingT = this.Microi.FileServer + res.Data;
		},
		change(e) {
			this.currentTab = e.index;
			if (e.index == 0) {
				this.placeholder = '搜人名/公司/职位/行业';
				this.getSearchInfo();
				// if (!this.DataInfo || this.DataInfo == {}) {
				// 	this.getSearchInfo();
				// }
			} else {
				this.placeholder = '搜公司/行业/职位等';
				this.getRenMaiTuijian();
				// if (!this.RenMaiData || !this.RenMaiData.TuiJianList) {
				// 	this.getRenMaiTuijian();
				// }
			}
		},
		toAllBang() {
			uni.navigateTo({
				url: '/pages/my/huodong/hotBang'
			});
		},
		computeNum(num) {
			num = num * 1;
			if (num < 1000) {
				return num;
			} else if (num < 10000) {
				return num / 1000 + 'K+';
			} else {
				return num / 10000 + 'W+';
			}
		},
		computeColor(num) {
			if (num == 0) {
				return '#FE0505';
			} else if (num == 1) {
				return '#FF7A05';
			} else if (num == 2) {
				return '#FFDA06';
			} else {
				return '#999999';
			}
		},
		goBack() {
			console.log(this.backUrl);
			if (this.backUrl) {
				uni.reLaunch({
					url: `/pages${this.backUrl}`
				});
			} else {
				let pages = getCurrentPages(); // 获取当前页面堆栈
				let pageCount = pages.length; // 页面堆栈中的页面数量
				// 判断是否有上级页面
				if (pageCount > 1) {
					// 如果有上级页面，则返回上级页面
					uni.navigateBack({
						delta: 1
					});
				} else {
					// 如果没有上级页面，则返回首页
					uni.switchTab({
						url: '/pages/tabbar/find/find' // 替换为你的首页路径
					});
				}
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f4f5f6;
}
.page {
	background: #f4f5f6;
	padding-bottom: 100rpx;
}
.header-container {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100%;
}
.hear-box {
	display: flex;
	align-items: center;
	justify-content: space-between;

	background-color: #ffffff;
	box-sizing: border-box;
	padding: 20rpx;
	border: 2rpx solid #f4f5f6;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 40rpx;
	color: #212121;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.hear-box image {
	width: 40rpx;
	height: 40rpx;
}
.popup-info {
	height: 100vh;
	padding: 32rpx;
	width: 520rpx;
	box-sizing: border-box;
	background: #eef0f1;
	border-radius: 78rpx 0rpx 0rpx 78rpx;
}

.popup-logo {
	width: 40rpx;
	height: 40rpx;
}
.popup-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: #fff;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	width: 456rpx;
	height: 88rpx;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 1rpx solid #f3f5f9;

	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.popup-box image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 14rpx;
}
.search-container {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
}
.search-box {
	width: 590rpx;
	height: 76rpx;
	background: #f4f5f6;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 20rpx;
	display: flex;
	box-sizing: border-box;
	align-items: center;
}
.search-box image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 20rpx;
}
.search-btn {
	width: 64rpx;
	height: 44rpx;

	font-weight: 500;
	font-size: 32rpx;
	color: #666666;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-left: 20rpx;
}
.input-placeholder {
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	font-style: normal;
	text-transform: none;
}
.all-Bang {
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 31rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	margin-top: 30rpx;
}
.all-Bang image {
	width: 16rpx;
	height: 20rpx;
}
.searchLog-container {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 20rpx;
	margin: 32rpx;
}
.searchLog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.searchLog-title {
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.searchLog-header image {
	width: 32rpx;
}
.searchLog-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 56rpx;
	flex-wrap: wrap;
}
.searchLog-box .info {
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 32rpx;
	color: #333333;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.bangdan-container {
	margin: 32rpx;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
}
.bangdan-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4rpx;
}
.huati-box {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 32rpx;
	margin: 30rpx 0;
}
.huati-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.xuhao-info {
	height: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #999999;
	line-height: 35rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.num-info {
	height: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #999999;
	line-height: 35rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.renmai-container {
	height: 380rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 24rpx 26rpx;
	margin: 20rpx;
}
.renmai-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #6a6363;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-bottom: 16rpx;
}
.renmai-title {
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.user-container {
	align-items: center;
	justify-content: flex-start;
	display: inline-flex;
	gap: 16rpx;
}
.RenMai-box {
	width: 300rpx;
	height: 300rpx;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 16rpx;
	padding: 16rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
	border: 1rpx solid #f3f5f9;
}

.Renmai-BGC {
	position: absolute;
	top: 0%;
	left: 0;
	width: 100%;
	height: 100rpx;

	border-radius: 0 0 50% 50%;
}
.Renmai-avatar {
	width: 80rpx;
	height: 80rpx;
	z-index: 1;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.RenMai-name {
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #212121;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.Renmai-Zhiwei {
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #333333;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.add-Friend {
	width: 144rpx;
	height: 48rpx;
	background: #FB353B;
	line-height: 48rpx;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.pinglun-nr {
	width: 282rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #999999;
	text-align: center;
	font-style: normal;
	text-transform: none;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
</style>
